<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Knob example. Click on the middle of the widget to input a value.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknob.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <style>
        input {
            width: 110px;
            height: 70px;
            position: absolute;
            vertical-align: middle;
            border: 0px;
            font-weight: bold;
            font-style: normal;
            font-variant: normal;
            font-stretch: normal;
            font-size: 48px;
            line-height: normal;
            font-family: Arial;
            text-align: center;
            color: #00a644;
            padding: 0px;
            -webkit-appearance: none;
            background: none;
            margin-top: -35px;
            margin-left:-55px;
            left: 50%;
            top: 50%;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#knob').jqxKnob({
                value: 30,
                min: 0,
                max: 100,
                startAngle: 270,
                endAngle: 630,
                rotation: 'clockwise',
                style: { fill: "#fff" },
                dial: {
                    style: {
                        fill: "#fff"
                    },
                    innerRadius: '68%',
                    outerRadius: '92%',
                    startAngle: 0,
                    endAngle: 360
                },
                progressBar: {
                    style: { fill: '#00a644' },
                    background: {fill: '#eeeeee'},
                    size: '30%',
                    offset: '70%'
                },
                pointer:
                    {
                        type: 'line',
                        style: { fill: '#00a644' },
                        size: '30%',
                        offset: '70%',
                        thickness: 20
                    }
            });
            var input = $('<input>');
            $('#knob').append(input);
            input.val($('#knob').val());
            $(input).on('mousedown', function (event) {
                event.stopPropagation();
            });

            $(input).on('keyup', function () {
                var val = $(this).val();
                $('#knob').val(val);
            });

            $('#knob').on('change', function (event) {
                if (event.target.nodeName == "INPUT")
                    return;

                if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }
                $(input).val(event.args.value);
            })
        });
    </script>
</head>
<body class='default'>
    <div id='knob' style="width: 400px; height: 400px">
    </div>
</body>
</html>
